<template>
  <div class="contents">
    <div class="curform">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="帐号" prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"  placeholder="请输入帐号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="userlogin">登录</el-button>
                <el-button @click="resetforms">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
  </div>
</template>

<script>
import { successMsg,faileMsg } from "../../tools/tools.js";
import { managerLogin } from "../../request/api.js";

export default {
  methods:{
    //用户登录
    userlogin(){
        //判断帐号、密码是否为空：
        if(this.ruleForm.username == '' || this.ruleForm.password == ''){
          faileMsg('帐号及密码都不能为空！');
          return;
        }

        //调用登录接口：
        managerLogin(this.ruleForm).then(d=>{
          console.log(d,'d...');
           if(d.data.code == 200){  //登录成功
              successMsg('登录成功');
              //将登录成功的帐号信息存储在本地的sessionStorage中：
              sessionStorage['manaInfos'] = JSON.stringify(d.data.list);
              this.$router.push('/');
           }else{ //登录失败
              faileMsg(`登录失败`);
           }
        }).catch(e=>{ //登录异常
        console.log(e,'ee....');
           faileMsg(`登录异常，请联系管理员！`);
        })
    },
    //重置表单
    resetforms(){
       this.ruleForm={
          username: '',  //帐号
          password: '',  //密码
        };

    }
  },
 data() {
      var validateUsername = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入帐号'));
        } else {
           let usernameReg = /^[a-zA-Z]\w{3,11}$/;
       
           if(!usernameReg.test(value)){
            callback(new Error('帐号格式不正确!正确的格式为？？'));
           }else{
              callback('');
           }
          
        }
      };
      var validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          username: '',  //帐号
          password: '',  //密码
        },
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ]
        }
      };
    }
}
</script>

<style scoped>
.contents{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right,#563443,#2F3D60);
}
.curform{
    padding-top: 20px;
    width: 400px;
    height: 260px;
    position: absolute;
    left: 50%;
    top:50%;
    background: white;
    transform: translate(-50%,-50%);
}

.el-input{
    width:260px;
}
</style>